<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>动画注册登录页面</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.js"></script>
</head>

<body>
<div class="materialContainer">
    <div class="box" id="login" style="height:600px">
        <div class="title">登录</div>
      <!--  <div class="input">
            <label for="name">用户名</label>
            <input type="text" v-model="user.userName" id="name">
            <span class="spin"></span>
        </div>-->
        <div class="input">
            <label for="phone">账号</label>
            <input type="text" v-model="user.userPhone" id="phone">
            <span class="spin"></span>
        </div>
        <div class="input">
            <label for="pass">密码</label>
            <input type="password" v-model="user.userPassword" id="pass">
            <span class="spin"></span>
        </div>
        <div class="button login">
            <button >
                <span @click="loging" style="color: #1E1E1E;">登录</span>
            </button>
        </div>

    </div>

    <div class="overbox" id="register" style="height:600px">
        <div class="material-button alt-2">
            <span class="shape"></span>
        </div>
        <div class="title">注册</div>
        <div class="input">
            <label for="regname">用户名</label>
            <input type="text" v-model="user.userName" id="regname">
            <span class="spin"></span>
        </div>
        <div class="input">
            <label for="regphone">电话</label>
            <input type="text" v-model="user.userPhone" id="regphone">
            <span class="spin"></span>
        </div>
        <div class="input">
            <label for="regpass">密码</label>
            <input type="password" v-model="user.userPassword" id="regpass">
            <span class="spin"></span>
        </div>
        <div class="input">
            <label for="reregpass">确认密码</label>
            <input type="password"  v-model="user.userRePassword" id="reregpass">
            <span class="spin"></span>
        </div>

        <div class="button">
            <button>
                <span id="reg" @click="regis">注册</span>
            </button>
        </div>
    </div>

</div>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/index.js"></script>
<script>

    /*用户注册*/
    var appr = new Vue({
        el: "#register",
        data: {
            user:{
                userName:'',
                userPhone:'',
                userPassword:'',
                userRePassword:''
            }
        },
        methods:{
            regis:function(){
                let vs = this;
                let u = this.user;
                let flag = true;
                if(u.userName == '' || u.userPhone == '' || u.userPassword == ''){
                    alert("输入框不能为空！");
                    flag = false;
                }
                if(u.userPassword != u.userRePassword){
                    alert("两次密码不一致！");
                    flag = false;
                }
                if(flag){
                    $.ajax({
                        url:"/freshmarket/user/register",
                        type:"post",
                        dataType:"json",
                        data:vs.user,
                        success:function(data){
                            console.log(data);
                            if(data.success){
                                alert(data.message);
                            }else{
                                alert(data.message);
                            }
                        }
                    });
                }

            }
        },
        //生命周期初始化
        mounted: function () {

        }
    });
    /*用户登录*/
    var appl = new Vue({
        el: "#login",
        data: {
            user:{
                userName:'',
                userPhone:'',
                userPassword:''
            }
        },
        methods:{
            loging:function(){
                let vs = this;
                let u = this.user;
                let flag = true;
                if(u.userPhone == '' || u.userPassword == ''){
                    alert("输入框不能为空！");
                    flag = false;
                }
                if(flag){
                    $.ajax({
                        url:"/freshmarket/user/login",
                        type:"post",
                        dataType:"json",
                        data:vs.user,
                        success:function(data){
                            console.log(data);
                            if(data.success){
                                alert("登录成功！");
                                window.location="/index"
                            }else{
                                alert(data.message);
                            }
                        }
                    });
                }

            }
        },
        //生命周期初始化
        mounted: function () {

        }
    });

</script>
</body>

</html>